<template>
  <div>
    <table border="1" width="700" style="border-collapse: collapse">
      <caption>
        购物车
      </caption>
      <thead>
        <tr>
          <th>
            <input type="checkbox" :checked="isAll" @click="btnAll" />
            <span>全选</span>
          </th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>总价</th>
          <th>操作</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="(item, index) in goodlist" :key="item.id">
          <td><input type="checkbox" v-model="item.checked" /></td>
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td>
            <button @click="btnsub(index)">-</button>{{ item.num
            }}<button @click="btnAdd(index)">+</button>
          </td>
          <td>{{ total(index) }}</td>
          <td><button @click="btndel(index)">删除</button></td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>合计:</td>
          <td colspan="5">
            {{ priceAll }}
          </td>
        </tr>
      </tfoot>
    </table>
    <div>
      名称：<input type="text" v-model.trim="form.name" /> 价格:<input
        type="number"
        v-model="form.price"
      />
      数量:<input type="number" v-model="form.num" />
      <button @click="addBtn">添加</button>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
console.log()
export default {
  data () {
    return {
      goodlist: this.$store.state.goodList,
      checked: false,
      form: {
        name: '',
        price: '',
        num: '',
        checked: false
      }
    }
  },
  computed: {
    ...mapState(['goodList']),
    ...mapGetters(['total', 'isAll', 'priceAll'])
  },
  methods: {
    ...mapMutations(['Subnum', 'Addnum', 'Btndel', 'inputCheck', 'addlist']),
    btnsub (index) {
      this.Subnum(index)
    },
    btnAdd (index) {
      this.Addnum(index)
    },
    btndel (index) {
      this.Btndel(index)
    },
    btnAll () {
      this.inputCheck(!this.isAll)
    },
    addBtn () {
      this.addlist(JSON.parse(JSON.stringify(this.form)))
    }
  }
}
</script>

<style></style>
